<template>
	<view class="person_order">
		<view class="team_top">
			<view class="nav">
				<u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false" :current="current" @change="navChange"></u-tabs>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
		<!--  -->
		<view class="no_html" v-if="list.length==0">
			<image src="@/static/images/no_img5.png" mode=""></image>
			<text>暂无订单信息</text>
		</view>
		<!--  -->
		<view v-else>
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_top">
					<view class="text">
						<text class="color2" v-if="current==0">仓储</text>
						<text class="color1" v-if="current==1">进货</text>
						{{current==0?item.createtime:item.order_num}}
					</view>
					<view class="text right" v-if="current==0 || current==1">待审核</view>
					<view class="text right" v-if="current==2">
						<text style="color: #666;" v-if="item.status==2">已匹配</text>
						<text style="color: #666;" v-if="item.status==3">已上传</text>
						<text style="color: #666;" v-if="item.status==4">已完成</text>
					</view>
				</view>
				<view class="goods_info" v-if="item.goods && current==0">
					<view class="image">
						<image :src="item.goods.image_text" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name one-txt-cut">{{item.goods.goods_name}}</view>
						<view class="num">
							<text class="left">￥{{item.goods.price}}</text>
							<text class="right">x{{item.num}}</text>
						</view>
						<view class="num">
							<text class="left">总价：￥{{item.pay_money}}</text>
						</view>
					</view>
				</view>
				<view class="per_info" v-if="current==1 || current==2">
					<view class="info_name">买家：{{item.buyuser.username}}</view>
					<view class="info_name">买家手机号：{{item.buy_mobile}}</view>
					<view class="info_name">卖家：{{item.selluser.username}}</view>
					<view class="info_name">卖家手机号：{{item.sell_mobile}}</view>
					<view class="info_name" style="width: 100%;">交易金额：{{item.pay_money}}</view>
				</view>
				<view class="list_btn" v-if='current==2 && (item.status==2||item.status==3)'>
					<text class="btn1" @click="quxiaoBtn(item.id)">取消订单</text>
					<text class="btn2" @click="wanchengBtn(item.id)" v-if="item.status==3">完成交易</text>
				</view>
				<view class="list_btn" v-if='current==0 || current==1'>
					<text class="btn1" @click="payImage(item.image)">支付凭证</text>
					<text class="btn1" @click="auditReject(item.id)">审核拒绝</text>
					<text class="btn2" @click="approvedBtn(item.id)">审核通过</text>
				</view>
			</view>
			<view class="mall_loading" v-if="list.length">
				<u-loadmore :status="status" color='#999' />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[{
					name: '仓储区订单'
				}, {
					name: '进货区订单'
				},
				{
					name: '进货区全部'
				}
				],
				current: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				list: [],
			};
		},
		onLoad() {},
		onShow() {
			this.page=1
			this.getList()
		},
		methods:{
			getList(){
				var that = this
				if(that.page==1){
					that.$tips.showLoading('加载中')
				}else{
					that.status = 'loading'
				}
				if(that.current==0){
					var params = {
						page:that.page,
						status: 2,
						is_shop:2,
					}
					that.$httpApi.orderList(params).then((res) => {
						if (res.code == 1) {
							if (that.page == 1) {
								that.list = []
								that.$tips.hideLoading()
							}
							if (res.data.current_page == res.data.last_page) {
								that.status = 'nomore'
							} else {
								that.status = 'loadmore'
							}
							that.list = that.list.concat(res.data.data)
						}
					})
				}else{
					var params = {
						page:that.page,
						type:that.current==1?5:1
					}
					that.$httpApi.orderAuditIndex(params).then((res) => {
						if (res.code == 1) {
							if (that.page == 1) {
								that.list = []
								that.$tips.hideLoading()
							}
							if (res.data.current_page == res.data.last_page) {
								that.status = 'nomore'
							} else {
								that.status = 'loadmore'
							}
							that.list = that.list.concat(res.data.data)
						}
					})
				}
			},
			// nav
			navChange(index) {
				this.current = index
				this.page=1
				this.list=[]
				this.getList()
			},
			// 支付凭证
			payImage(image){
				var arr = []
				arr.push(image)
				uni.previewImage({
					current:0,
					urls: arr,
				})
			},
			// 审核通过
			approvedBtn(val){
				var that = this
				if(that.current==0){
					// 仓储
					that.$tips.showLoading('加载中')
					var params = {
						order_id:val,
						shop_status:3,
					}
					that.$httpApi.goodsOrderAudit(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('审核通过')
							that.page=1
							that.getList()
						}
					})
				}else{
					// 进货
					that.$tips.showLoading('加载中')
					var params = {
						order_id:val,
						status:1,
					}
					that.$httpApi.shopOrderAudit(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('审核通过')
							that.page=1
							that.getList()
						}
					})
				}
			},
			// 审核拒绝
			auditReject(val){
				uni.navigateTo({
					url:'/pages/person/refuse_msg?id='+val+'&type='+this.current
				})
			},
			// 取消订单
			quxiaoBtn(val){
				var that = this
				that.$tips.showLoading('加载中')
				var params = {
					order_id:val,
					status:3,
				}
				that.$httpApi.shopOrderAudit(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('取消成功')
						that.page=1
						that.getList()
					}
				})
			},
			// 完成交易
			wanchengBtn(val){
				var that = this
				that.$tips.showLoading('确认中')
				var params = {
					order_id:val,
					type:1,
				}
				that.$httpApi.goodsOrderOk(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('交易完成')
						that.page = 1
						that.getList()
					}
				})
				
			},
			detailsBtn(){
				uni.navigateTo({
					url:'/pages/person/person_order_details'
				})
			}
		},
		onReachBottom() {
			if (this.status == 'nomore' || this.status == 'loading') {
				return
			}
			this.page++
			this.getList()
		},
	}
</script>

<style lang="less">
	.person_order{
		width: 100%;
		.team_top{
			position: fixed;
			z-index: 10;
			width: 100%;
			background: #fff;
			border-bottom: 2rpx solid #f7f8fa;
			.nav{
				width: 100%;
				height: 88rpx;
			}
		}
		//
		.list{
			width: 100%;
			background: #fff;
			margin-bottom: 24rpx;
			.list_top{
				width: 100%;
				line-height: 88rpx;
				padding: 0 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.text{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;
					text{
						display: block;
						margin-right: 10rpx;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}
					.color1{
						background: #FFA551;
					}
					.color2{
						background: #26C281;
					}
					.color3{
						background: #148EFF;
					}
				}
				.right{
					color: #666;
				}
				.right1{
					color: #FF6230;
				}
			}
			.per_info{
				width: 100%;
				padding: 4rpx 40rpx 24rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				flex-wrap: wrap;
				.info_name{
					width: 40%;
					padding-top: 20rpx;
				}
				.info_name:nth-child(2n){
					width: 60%;
				}
			}
			.goods_info{
				width: 100%;
				padding: 24rpx 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				.image{
					position: relative;
					width: 168rpx;
					height: 168rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.info{
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;
					.name{
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.money{
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						text{
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}
						.color1{
							color: #FF6230;
						}
						.color2{
							color: #26C281;
						}
					}
					.money1{
						width: 100%;
						padding-top: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 40rpx;
								height: 40rpx;
							}
							text{
								padding-left: 5rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #222222;
							}
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.num{
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.tip_txt1{
				width: 100%;
				padding: 20rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.right{
					display: flex;
					align-items: center;
					.txt1{
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
					.txt2{
						padding-left: 10rpx;
						font-size: 40rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
			.tip_txt{
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.txt{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;
					text{
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}
					.color1{
						background: #FF815A;
					}
					.color2{
						background: #43A5FF;
					}
					.color3{
						background: #51CE9A;
					}
				}
			}
			.list_btn{
				width: 100%;
				padding: 32rpx;
				display: flex;
				justify-content: flex-end;
				text{
					margin-left: 12rpx;
					display: block;
					padding: 0 20rpx;
					height: 64rpx;
					line-height: 60rpx;
					border-radius: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
				.btn1{
					color: #999;
					border: 2rpx solid #EBEBEB;
				}
				.btn2{
					color: #26C281;
					border: 2rpx solid #26C281;
				}
			}
		}
	}
</style>
